<template>
  <view class="chargeComplete">
    <view class="chargeComplete-box">
      <img src="../static/chargingManager/success.png" alt="" class="successImg">
      <view class="successText">充电完成</view>
      <view class="tip">请拔枪归位，感谢您对使用</view>
      <view class="submit"  @click="goHome">返回首页 {{countdown}}s</view>
    </view>
  </view>
</template>

<script>
export default {
data(){
    return{
      countdown: 3 ,
      timer:" ",
    }
  },
  onLoad(){
    this.timer = setInterval(() => {
      this.countdown = this.countdown - 1
      if (this.countdown <= 0) {
        //TODO: 返回首页路由地址 待替换
        uni.switchTab({ url: '/pages/park/home/index' }) // 跳转至首页
        clearInterval(timer)
        this.timer = null
      }
    }, 1000)
  },
  onUnload(){
    clearInterval(this.timer)
  },
  methods:{
    goHome(){
        //TODO: 返回首页路由地址 待替换
      uni.switchTab({ url: '/pages/park/home/index' })
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style scoped>
.chargeComplete{
  width: 100vw;
  height: 100vh;
  background: #557EFF;
  box-sizing: border-box;
  padding-top: 20px;
  text-align: center;
}
.chargeComplete-box{
  width: 100vw;
  min-height: 97vh;
  background: #fff;
  padding: 30px 15px 0 15px;
  border-radius: 24px 24px 0 0;
  box-sizing: border-box;
}
.successText{
  font-size: 16px;
  color: #1A1A1A;
  margin: 10px 0;
}
.tip{
  font-size: 12px;
}
.successImg{
  width: 80px;
  height: 80px;
  margin: 70px auto 0;
}
.submit{
  width: 200px;
  height: 48px;
  background: #557EFF;
  border-radius: 87px 87px 87px 87px;
  color: #fff;
  text-align: center;
  line-height: 48px;
  margin: 50px auto;
}
</style>